<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PalPay Demo</title>
    <script src="https://www.paypal.com/sdk/js?client-id=client-id"></script>
</head>
<body>
<div id="paypal-button-container"></div>

{literal}
<script>
    paypal.Buttons({
        createOrder: function(data, actions) {
            // 调用后端API 生成订单
            return fetch(`${window.location.origin}/cms/api/home/pay/pay_pal_pay`, {
                method: 'post',
                headers: {
                    'content-type': 'application/json',
                    'Authorization': '609255abd413916202029238694945523'
                },
                body: JSON.stringify({
                    type: 'h5'
                })
            }).then(function(res) {
                return res.json()
            }).then(function(orderData) {
                return orderData.items.id;
            });
        },
        onApprove: function(data, actions) {
            // 支付后回调
            return fetch(`${window.location.origin}/cms/api/home/pay/pay_pal_pay`, {
                method: 'post',
                headers: {
                    'content-type': 'application/json'
                },
                body: JSON.stringify({
                    orderID: data.orderID,
                    type: 'jsapi'
                })
            }).then(function(res) {
                return res.json();
            }).then(function(details) {
                console.log(details)
                alert('Transaction funds captured from ' + details.items.payer_given_name);
            })
        }
    }).render('#paypal-button-container');
</script>
{/literal}
</body>
</html>